<template>
  <!-- :disabled="btnConfig.disabled" -->
  <v-btn
    :loading="btnConfig.loading"
    :block="btnConfig.block"
    :color="btnConfig.color"
    :outlined="btnConfig.outlined"
    :disabled="btnDisabled"
    :x-small="btnConfig['x-small']"
    :small="btnConfig.small"
    :large="btnConfig.large"
    :x-large="btnConfig['x-large']"
    @click="btnClick($event, btnConfig.method)"
  >
    <template v-if="btnConfig.iconType === 'mdi'">
      <v-icon>{{ 'mdi-' + btnConfig.icon }}</v-icon>
      {{ btnConfig.title }}
    </template>
    <template v-else>
      <svg-icon v-if="showIconPositionLeft" :icon-class="btnConfig.icon" class="ma-1"></svg-icon>
      {{ btnConfig.title }}
      <svg-icon v-if="showIconPositionRight" :icon-class="btnConfig.icon" class="ma-1"></svg-icon>
    </template>
    <!-- <v-icon>mdi-magnify</v-icon> -->
  </v-btn>
</template>

<script>
import { isEmptyValue } from '@/utils/tools'

export default {
  // button component
  name: 'BaseButton',

  model: {
    prop: 'btnItemConfig',
    event: 'setBtnItem'
  },

  // father component props
  props: {
    // btnItemConfig: { type: Object, default: () => ({}) },
    btnItemConfig: { type: Object, required: true },
    disabled: { type: Boolean, default: undefined }
  },

  data() {
    return {
      // button item config
      btnConfig: this.btnItemConfig,
      // button icon
      icon: this.btnItemConfig.icon,
      // button icon position
      iconPosition: this.btnItemConfig.iconPosition
    }
  },

  computed: {
    // icon position: left
    showIconPositionLeft() {
      /**
       * if icon is null
       * 1. true -> icon is not display
       * 2. 不为空 false, 继续判断iconPostion 为空时 默认左边
       *    如果 iconPosition 为 right, 则不显示左边
       */
      if (isEmptyValue(this.icon)) {
        return false
      } else {
        if (isEmptyValue(this.iconPosition)) {
          return true
        } else {
          return this.iconPosition !== 'right'
        }
      }
    },

    showIconPositionRight() {
      /**
       * 如果icon为空
       * 1. true 不显示
       * 2. 不为空 false, 继续判断iconPostion 为空时 默认不显示 false
       *    如果 iconPosition 为 right, 则显示右边
       */
      if (isEmptyValue(this.icon)) {
        return false
      } else {
        if (isEmptyValue(this.iconPosition)) {
          return false
        } else {
          return this.iconPosition === 'right'
        }
      }
    },
    btnDisabled: {
      get() {
        return isEmptyValue(this.disabled) ? this.btnConfig.disabled : this.disabled
      }
    }
  },

  watch: {
    // 'btnConfig.disabled': {
    //   handler(nv) {
    //     console.log(nv)
    //   }
    // }
  },

  created() {},

  methods: {
    // 按钮点击事件
    btnClick(el, method) {
      this.$emit('buttonCB', method, el)
    }
  }
}
</script>

<style lang="scss" scoped></style>
